<template>
    <div class="qrindex">
        <Tabs value="companyQr" type="card" > <!--@on-click="changeQRViews($event)"-->
            <TabPane label="公司产品二维码管理" name="companyQr" icon="social-tux">
                <Input v-model="qrContent" placeholder="请输入要转换的内容..." style="width: 300px" clearable v-on:on-enter="changeQRViews"></Input>
                <Button type="primary" @click="changeQRViews">确认</Button>
                <div v-if="imageShowFlag">
                    <img v-bind:src="imgBase64">
                </div>
            </TabPane>
            <TabPane label="商家二维码管理" name="businessQr" icon="social-windows">

            </TabPane>
        </Tabs>
    </div>
</template>

<script>
    import $ from '../../../lib/util';
    export default {
        name: 'qrindex',
        data() {
            return {
                imageShowFlag: true,
                qrContent: '',
                imgBase64: ''
            }
        },
        methods: {
            changeQRViews(){
                const _this = this;
                //$.openProcessLoading(_this, '正在生成二维码');
                $.ajax.get('/qr/?qrtype='+_this.qrContent).then(res => {
                    //$.closeProcessLoading(_this);
                    if(res.code===0){
                        _this.imageShowFlag = true;
                        _this.imgBase64 = res.msg;
                    }
                    else{
                        _this.imageShowFlag = false;
                        _this.imgBase64 = '';
                        this.$Message.error(res.msg);
                    }
                }).catch(error =>{

                });
            }
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
